<template>
  <grid class="home-body">
    <carousel :list="banners"></carousel>
    <recommend :list="recommends"></recommend>
    <new-item :list="list"></new-item>
    <friend-link :list="links"></friend-link>
  </grid>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import Carousel from './components/carousel'
import Recommend from './components/recommend'
import NewItem from './components/new-item'
import FriendLink from './components/friend-link'

export default {
  name: 'home',
  title () {
    return this.title
  },
  keywords () {
    return this.keywords
  },
  description () {
    return this.description
  },
  data () {
    return {}
  },
  components: {
    Carousel, Recommend, NewItem, FriendLink
  },
  computed: {
    ...mapGetters('home', ['list', 'title', 'keywords', 'description', 'banners', 'recommends', 'links']),
  },
  async asyncData ({ store, route }) {
    const taskList = [
      store.dispatch('home/fetchBanners'),
      store.dispatch('home/fetchRecommends'),
      store.dispatch('home/fetchList', { limit: 12, page: 1, type: 'new' }),
      store.dispatch('home/fetchLinks'),
    ];
    return Promise.all(taskList);
  },
}
</script>
<style lang="scss" scoped>
</style>